<template>
  <div class="nnn-contain">
    <el-container>
      <el-header style="height: 100%">
        <el-card class="page-tools">
          <el-form :inline="true" size="small">
            <!-- 第一行开始 -->
            <el-row align="middle" :gutter="10">
              <!-- 素材名称开始 -->
              <el-col :span="6">
                <el-form-item label="素材名称">
                  <el-input
                    v-model="source"
                    size="small"
                    placeholder="输入要搜索的素材名称"
                  />
                </el-form-item>
              </el-col>
              <!-- 素材名称结束 -->

              <!-- 上传者id开始 -->
              <el-col :span="6">
                <el-form-item label="上传者id">
                  <el-input
                    v-model="loader"
                    size="small"
                    placeholder="输入要搜索的素材名称"
                  />
                </el-form-item>
              </el-col>
              <!-- 上传者id结束 -->
              <el-col :span="12">
                <el-form-item label="素材类别">
                  <el-select
                    v-model="value"
                    size="small"
                    placeholder="---请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>

                  <el-select
                    v-model="value"
                    style="padding-left: 15px"
                    size="small"
                    placeholder="--- 请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第一行结束 -->
          </el-form>

          <!-- 第二行开始 -->
          <el-row>
            <el-col :offset="15">
              <el-button
                size="small"
                type="primary"
                @click="query"
              >查询</el-button>
              <el-button
                style="margin-left: 30px"
                size="small"
                type="primary"
                @click="reset"
              >重置</el-button>
            </el-col>
          </el-row>
          <!-- 第二行结束 -->
        </el-card>
      </el-header>
      <el-footer>
        <el-card>
          <el-table :data="aab ? tableDate : tableData" style="width: 100%">
            <el-table-column prop="materialName" label="素材名称" width="" />

            <el-table-column label="素材图" width="">
              <template slot-scope="scope">
                <el-image
                  :key="scope.row.id"
                  style="height:50%; width:50%"
                  :src="scope.row.materialMap"
                  :preview-src-list="[scope.row.materialMap]"
                />
              </template>
            </el-table-column>

            <el-table-column
              prop="materialCategory"
              label="素材类别"
              width=""
            />

            <el-table-column prop="price" label="价格" />
            <el-table-column prop="uploaderId" label="上传者ID" />
            <el-table-column prop="telephone" label="联系电话" width="120" />
            <el-table-column
              prop="materialShelf"
              label="素材上架日期"
              width="120"
            />
            <el-table-column prop="numberOfSales" label="售出次数" />
            <el-table-column prop="materialIncome" label="素材收益" />
            <el-table-column label="操作">
              <!-- <a href="javascript:void(0);"
          >违规下架</a> -->
              <!-- <el-button @row-click="getDetails" type="primary" size="small">违规下架</el-button> -->
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="getDetails(scope.$index, scope.row)"
                >违规下架
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { getMaterialList, getMaterialCategory } from '@/api/library'
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '1'
        },
        {
          value: '选项2',
          label: '2'
        }
      ],
      value: '',
      aab: false,
      source: '',
      loader: '',
      tableDate: [],
      isShow: false,
      tableData: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getMaterialList()
  },
  mounted() {},
  methods: {
    async getMaterialList() {
      this.tableData = await getMaterialList()
    },
    async getMaterialCategory() {
      this.tableDate = await getMaterialCategory(this.value)
    },
    onSubmit() {
      console.log('submit!')
    },
    btn(row) {
      console.log(row)
      alert('1')
    },
    // 删除
    getDetails(index, row) {
      // this.tableData.forEach({})
      console.log(index)
      this.tableData.splice(index, 1)
      // this.tableData[row].pop()
      // console.log(this.tableData);
    },
    // 原创2021年8月6日15:56:05
    query() {
      // 两个输入框全为空才直接展示data
      if (this.source !== '' || this.loader !== '') {
        const a = this.tableData.some(item => {
          if (
            item.materialName === this.source ||
            item.uploaderId === this.loader
          ) {
            this.aab = true
            this.tableDate = []
            return this.tableDate.push(item)
          }
        })
        if (!a) {
          this.$message('无数据')
        }
      } else if (this.value !== '') {
        this.getMaterialCategory()
        console.log(this.tableDate)
        this.aab = true
      }
    },
    reset() {
      this.aab = false
      this.source = ''
      this.loader = ''
      this.value = ''
    }
  }
}
</script>

<style scoped lang="scss">
.page-tools {
  margin: 10px 0;
  .before {
    line-height: 34px;

    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
}
</style>
